<script>
  export default {
    name: 'headerNavigationBar',
    props: {
      headerList: {
        type: Array,
        default: [],
      },
      // 是否选中
      headerIndex: {
        type: Number,
        default: 0,
      },
    },
    methods: {
      selectIndex(index) {
        this.$emit('selectIndex', index);
      },
    },
  };
</script>

<template>
  <view class="headerNavigationBar"
        :style="{
          gridTemplateColumns: `repeat(${headerList.length}, 1fr)`
        }"
  >
    <view class="headerNavigationBar_headerContent flex align-center justify-center" :style="{
      background: headerIndex == index ? '#FF4206' : '#FFFFFF'
    }" v-for="(item, index) in headerList" :key="index" @click.stop="selectIndex(index)">
      <view class="headerNavigationBar_headerContent_text flex align-center justify-center" :style="{
        color: headerIndex == index ? '#FFFFFF' : '#4B4B4B'
      }">{{ item.title }}
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .headerNavigationBar {
    width: 702rpx;
    display: grid !important;
    justify-content: space-between;

    .headerNavigationBar_headerContent {
      display: inline-block;
      //width: 190rpx;
      //height: 76rpx;
      background: #FFFFFF;
      border-radius: 15rpx 15rpx 0rpx 0rpx;

      padding: 20rpx 0;
      //margin-right: 20rpx;
      .headerNavigationBar_headerContent_text {
        width: 100%;
        height: 100%;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #4B4B4B;
      }
    }
  }
</style>